<template>
    <div class="animated fadeIn">
        <Tabs>
            <TabPane label="全部设备">
                <Row :gutter="16" style="margin-top:45px">


                    <Col :xs="24" :sm="12" :md="12" :lg="12">


                        <dash-chart-visitor></dash-chart-visitor>


                    </Col>

                    <Col :xs="24" :sm="12" :md="12" :lg="12">


                        <dash-chart-visitor></dash-chart-visitor>


                    </Col>


                </Row>
                <Row :gutter="16">



                    <Col :xs="24" :sm="12" :md="12" :lg="12">

                        <div style="background-color:white;">
                            <ul>
                                <li>
                                    <div class="staff_list">
                                        <div class="staff_avatar">
                                            <Avatar src="http://www.jq22.com/demo/AdminEx-141217204554/images/photos/user1.png"
                                                    size="large"/>
                                        </div>
                                        <div class="staff_progress">
                                            <p><span class="staff_name"> 员工1 </span><span> - 消防巡查</span></p>
                                            <Progress :percent="85" :stroke-width="8" status="active"></Progress>
                                        </div>
                                    </div>

                                    <hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>

                                </li>

                                <li>
                                    <div class="staff_list">
                                        <div class="staff_avatar">
                                            <Avatar src="http://www.jq22.com/demo/AdminEx-141217204554/images/photos/user2.png"
                                                    size="large"/>
                                        </div>
                                        <div class="staff_progress">
                                            <p><span class="staff_name"> 员工2 </span><span> - 电力巡查</span></p>
                                            <Progress :percent="90" :stroke-width="8" status="success"></Progress>
                                        </div>
                                    </div>
                                    <hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>

                                </li>


                                <li>
                                    <div class="staff_list">
                                        <div class="staff_avatar">
                                            <Avatar src="http://www.jq22.com/demo/AdminEx-141217204554/images/photos/user3.png"
                                                    size="large"/>
                                        </div>
                                        <div class="staff_progress">
                                            <p><span class="staff_name"> 员工3 </span><span> - 安全巡查</span></p>
                                            <Progress :percent="10" :stroke-width="8" status="wrong"></Progress>
                                        </div>
                                    </div>
                                    <hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>

                                </li>


                                <li>
                                    <div class="staff_list">
                                        <div class="staff_avatar">
                                            <Avatar src="http://www.jq22.com/demo/AdminEx-141217204554/images/photos/user4.png"
                                                    size="large"/>
                                        </div>
                                        <div class="staff_progress">
                                            <p><span class="staff_name"> 员工4  </span><span> - 水路巡查</span></p>
                                            <Progress :percent="60" :stroke-width="8"></Progress>
                                        </div>
                                    </div>

                                </li>

                            </ul>
                        </div>

                    </Col>
                    <Col  :xs="24" :sm="12"   :md="12" :lg="12" >

                        <dash-chart-large></dash-chart-large>



                    </Col>
                </Row>
            </TabPane>
            <TabPane label="用电安全">标签二的内容</TabPane>
            <TabPane label="水系统">标签三的内容</TabPane>
            <TabPane label="烟感系统">标签一的内容</TabPane>
            <TabPane label="用传系统">标签二的内容</TabPane>
        </Tabs>
    </div>

</template>

<script>
    import DashChartVisitor from '../charts/DashChartVisitor';
    import DashChartLarge from '../charts/DashChartLarge';
    export default {
        components: {DashChartLarge,DashChartVisitor},
        name: "DeviceWatch",
        mounted() {
        },

    }
</script>

<style scoped>
    .state-overview {
        color: #fff
    }

    .state-overview .ivu-col {
        margin-bottom: 20px
    }

    .state-overview .state-value .value {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 5px
    }

    .state-overview .state-value .title {
        font-size: 14px
    }

    .state-value {
        width: 60%;
        display: inline-block
    }

    .symbol {
        width: 35%;
        display: inline-block
    }

    .state-overview .panel {
        border-radius: 4px;
        padding: 25px 20px
    }

    .panel.purple {
        background: #6a8abe;
        box-shadow: 0 5px 0 #5f7cab
    }

    .panel.red {
        background-color: #fc8675;
        box-shadow: 0 5px 0 #e27869
    }

    .panel.blue {
        background: #5ab6df;
        box-shadow: 0 5px 0 #51a3c8
    }

    .panel.green {
        background: #4acacb;
        box-shadow: 0 5px 0 #42b5b6
    }

    .dash_income_chart {
        float: left
    }

    .ivu-row {
        margin-bottom: 20px !important
    }

    .dash_income {
        border-radius: 4px;
        background-color: #fff;
        height: 80px;
        padding: 15px
    }

    .staff_name {
        font-weight: 900;
        font-size: 16px
    }

    .staff_progress {
        margin-left: 10px;
        width: 90%
    }

    .staff_progress p {
        margin: 0
    }

    .staff_list {
        border-radius: 4px;
        margin-top: 0;
        height: 90px;
        display: flex;
        align-items: center
    }

    .animated {
        background-color: #eff0f4
    }

    li {
        margin-bottom: 11px;
        margin-left: 10px;
        margin-right: 10px
    }

    .num {
        font-weight: 700
    }

    .time {
        font-size: 14px;
        font-weight: 700
    }

    .content {
        padding-left: 5px
    }

    .dashboard_feature {
        text-align: center
    }

    .demo-carousel {
        height: 600px;
        line-height: 200px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        background: #506b9e
    }

    .demo-carousel img {
        height: 100%;
        width: 100%
    }

    h3, h4, h5 {
        margin: 12px
    }

    h3 {
        margin-bottom: 20px
    }

    p {
        margin: 12px
    }

    .row-margin-top {
        margin-top: 30px
    }

    .state-info {
        position: absolute;
        right: 15px;
        top: 20px;
        margin-bottom: 30px
    }

    .state-info .panel {
        margin-bottom: 20px;
        float: right;
        margin-left: 15px
    }

    .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
    }

    .panel-body {
        padding: 15px
    }

    .state-info .panel .summary {
        float: left;
        margin-right: 20px
    }

    .state-info .panel .summary span {
        color: #49586e;
        font-size: 13px;
        font-weight: 400;
        text-transform: uppercase;
        margin-bottom: 10px
    }

    .state-info .panel .summary h3.red-txt {
        color: #fc8675
    }

    .state-info .panel .summary h3.green-txt {
        color: #65cea7
    }

    .state-info .panel .summary h3 {
        font-size: 200%;
        font-weight: 700;
        line-height: 20px;
        margin: 0
    }

    .page-heading h3 {
        color: #49586e;
        font-size: 25px;
        font-size: 11%;
        font-weight: 400;
        margin: 10px 0
    }

    .chart-bar {
        float: right;
        margin-top: 5px
    }

    .chart-bar img {
        display: inline-block;
        width: 68px;
        height: 45px;
        vertical-align: top
    }

    @media screen and (max-width: 767px) {
        .state-info {
            position: static;
            width: 100%;
            margin-top: 15px
        }

        .state-info .panel {
            width: 100%
        }
    }

    .panel.blue-box {
        background: none repeat scroll 0 0 #5ab5de;
        box-shadow: 0 5px 0 #51a3c7;
        color: #fff
    }

    .twt-info h3 {
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        font-weight: 900;
        margin: 10px 0 30px 0;
        text-align: center
    }

    .twt-info p {
        font-size: 18px;
        line-height: 25px;
        font-style: italic;
        margin: 0 0 20px 0;
        text-align: center
    }

    .twt-info p a {
        color: #98fdf4
    }

    .media:first-child {
        margin-top: 0
    }

    .media.usr-info > .pull-left {
        margin-right: 20px;
        margin-top: 10px
    }

    .media > .pull-left {
        margin-right: 10px
    }

    .pull-left {
        float: left
    }

    .pull-left {
        float: left !important
    }

    .custom-trq-footer {
        background: none repeat scroll 0 0 #4eb6b7 !important;
        box-shadow: 0 5px 0 #46a3a4;
        color: #fff;
        border-top: none
    }

    .panel-footer {
        padding: 10px 15px;
        background-color: #f5f5f5;
        border-top: 1px solid #ddd;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px
    }

    .usr-info .thumb {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        -webkit-border-radius: 50%
    }

    .usr-info img {
        vertical-align: middle
    }

    .usr-info h4 {
        color: #658585;
        margin-bottom: 0
    }

    .media-heading {
        margin: 0 0 5px
    }

    .usr-info .media-body span {
        color: #ea755c;
        font-size: 12px;
        margin-bottom: 20px;
        display: inline-block
    }

    .usr-info .media-body p {
        color: #b6bcbc
    }

    ul.user-states {
        list-style-type: none;
        padding: 20px 0
    }

    ul.user-states li {
        text-align: center;
        float: left;
        width: 33%;
        font-size: 18px;
        margin: 0
    }
</style>